<template>
  <div class="actionWrap" @click.stop>
    <span class="title" :title="title">{{ title }}</span>

    <button v-if="false" class="btn" @click="changeResolution">
      <svg-icon icon-class="hd"/>
    </button>

    <el-dropdown v-if="enableQuality" placement="top" @command="handleCommand">
      <span class="el-dropdown-link">{{ currentQuality.name }}</span>
      <el-dropdown-menu slot="dropdown" class="quality-menu">
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[0]"
          :class="currentQuality.id ===qualityList[0].id?'selected-item':''">
          {{ qualityList[0].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[1]"
          :class="currentQuality.id ===qualityList[1].id?'selected-item':''">
          {{ qualityList[1].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[2]"
          :class="currentQuality.id ===qualityList[2].id?'selected-item':''">
          {{ qualityList[2].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :command="qualityList[3]"
          :class="currentQuality.id ===qualityList[3].id?'selected-item':''">
          {{ qualityList[3].name }}
        </el-dropdown-item>
        <el-dropdown-item
          class="quality-item"
          :class="currentQuality.id ===qualityList[4].id?'selected-item':''"
          :command="qualityList[4]">
          {{ qualityList[4].name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <button v-if="showRefresh" class="btn" @click.stop="refreshComp">
      <svg-icon icon-class="brush" style="width: 20px;height: 20px"/>
    </button>
    <button v-if="false" class="btn" @click="rotateVideo">
      <svg-icon icon-class="rotate"/>
    </button>
    <button class="btn" @click.stop="hideScreen">
      <svg-icon icon-class="hide_screen"/>
    </button>
    <button class="btn" @click.stop="fullScreen">
      <svg-icon icon-class="full_screen"/>
    </button>

  </div>
</template>

<script>

import {liveSetQuality} from "@/api/flycontrol";
import store from "@/store";

const QUALITY_LIST = [{
  id: '0',
  name: '智能'
}, {
  id: '1',
  name: '流畅'
}, {
  id: '2',
  name: '标清'
}, {
  id: '3',
  name: '高清'
}, {
  id: '4',
  name: '超清'
}]

export default {
  name: 'VideoActionBar',
  props: {
    title: {
      type: String,
      default: () => ' '
    },
    showRefresh: {
      type: Boolean,
      default: () => true
    },
    enableQuality: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      currentQuality: QUALITY_LIST[0],
      qualityId: '0',
      qualityList: QUALITY_LIST
    }
  },
  methods: {
    changeResolution() {
      this.$emit('changeResolution')
    },
    refreshComp() {
      this.$emit('refreshComp')
    },
    rotateVideo() {
      this.$emit('rotateVideo')
    },
    fullScreen() {
      this.$parent.fullScreen()
      this.$emit('fullScreen')
    },
    hideScreen() {
      this.$emit('hideScreen')
    },
    handleCommand(item) {
      if(!this.$parent.nestInfo || !this.$parent.nestInfo.nest_code) {
        return false
      }
      //
      liveSetQuality({
        user_id: store.getters.userId,
        factory: 'DJI',
        nest_code: this.$parent.nestInfo.nest_code,
        video_quality: item.id,
        action: 1
      }).then(res => {
        if (res && res.error_code === 0) {
          this.$message({showClose: true, message: res.msg, type: 'success'})
          this.currentQuality = item
        } else {
          this.$message({showClose: true, message: res.msg, type: 'warning'})
        }
      }).catch(e => {
        this.$message({showClose: true, message: '访问失败，请稍后重试', type: 'error'})
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.actionWrap {
  background: rgba(5, 29, 40, 0.6);
  position: absolute;
  bottom: 0;
  display: flex;
  color: white;
  padding: 5px;
  width: 100%;
  align-items: center;
  flex-direction: row;

  .title {
    flex: 1;
    width: 0;
    overflow: hidden; /* 超出一行文字自动隐藏 */
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
  }

  .btn {
    background: none;
    padding: 2px 5px;
    margin: 0;
    border: none;

    .svg-icon {
      width: 20px;
      height: 20px;
    }

  }
}

.el-dropdown-link {
  font-size: 12px;
  color: #18AAF2;
  border: #18AAF2 1px solid;
  padding: 2px 5px;
  border-radius: 4px;
  margin-right: 8px;
  cursor: pointer;

  ::v-deep .el-dropdown-menu {
    background-color: red
  }
}
</style>

<style lang="scss">
.quality-menu {
  border: none;
  border-radius: 0;
  background-color: grey;
  padding: 0;

  .quality-item {
    color: white;
    background-color: rgba(3, 17, 24, 0.6);

    &:hover {
      color: white;
      background-color: rgba(3, 17, 24, 0.8);
    }

    &:active {
      color: white;
    }
  }

  .selected-item {
    background-color: rgb(12, 65, 112);
    color: white;
  }
}
</style>
